<template>
  <div class="row" v-if="IssureInfo.StoreInfo">
    <div class="left">
      <div class="infomation">
        <div class="head row center">
          <div class="heng"></div>
          <div class="stars">
            <i
              v-for="(item, index) in IssureInfo.StoreInfo.starsNum"
              :key="'11' + index"
              >⭐
            </i>
          </div>
          <div class="heng"></div>
        </div>
        <div class="issuerName">{{ IssureInfo.StoreInfo.storeName }}</div>
        <div class="message">
          <div class="like">好评:{{ IssureInfo.goodNum }}</div>
          <div class="finished">收藏:{{ IssureInfo.likeNum }}</div>
          <div class="count">成功总订单数:{{ IssureInfo.count }}</div>
          <div class="address">地址:{{ IssureInfo.userInfo.address }}</div>
        </div>
        <div class="center">
          <el-button size="mini" type="info">收藏店铺</el-button>
        </div>
      </div>
      <div class="tv">
        <img width="160" src="@/assets/imgs/left.png" alt="" />
      </div>
    </div>
    <div class="right">
      <conSelect class="conSelect"></conSelect>
      <bookList1 lwidth="auto" colNum="4" :bookList="bookList"></bookList1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      findByPage: {
        userId: 1,
        pageNum: 1,
        pageSize: 8,
      },
      bookList: [],
      IssureInfo: {},
    };
  },
  components: {
    conSelect: () => import("@/components/util/conSelect.vue"),
    filters: () => import("@/components/util/filters.vue"),
    bookList1: () => import("@/components/book/bookList1.vue"),
  },
  mounted() {
    console.log("home  userId=", this.$route.query.userId);
    this.findByPage.userId = this.$route.query.userId;
    this.findAll();
    this.getIssuerInfo();
  },
  activated() {
    new Promise((resolve, reject) => {
      this.findByPage.userId = this.$route.query.userId;
      // console.log("1");
      resolve();
    }).then(() => {
      // console.log("2");
      this.findAll();
      // console.log("3");
      this.getIssuerInfo();
      // console.log("4");
    });

    // this.findByPage.userId = this.$route.query.userId;
    // this.findAll();
    // this.getIssuerInfo();
  },
  methods: {
    findAll() {
      this.$axios
        .post("index/sys/book/getBooksByPage", this.findByPage)
        .then(({ data }) => {
          this.bookList = data.bookInfo;
          // this.total = data.total;
        });
    },
    getIssuerInfo() {
      this.$axios
        .get("sys/store/getIssureInfoByUserId?userId=" + this.findByPage.userId)
        .then(({ data }) => {
          this.IssureInfo = data;
          // console.log("getIssureInfoByUserId : ", data);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 160px;
  margin-right: 18px;
  .infomation {
    border: 1px solid lightgrey;
    padding: 10px;
    .head {
      margin-bottom: 20px;
      .heng {
        width: 10px;
        height: 1px;
        background: rgb(231, 193, 178);
      }
      .stars {
        margin-left: 2px;
        margin-right: 2px;
      }
    }
    .issuerName {
      font-weight: 600;
      margin-top: 20px;
    }
    .message {
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 2;
      font-size: 12px;
      color: lightgrey;
      // .like {
      // }
      // .finished {
      // }
      // .count {
      // }
    }
  }
  .tv {
    margin-top: 20px;
    border: 1px solid lightgrey;
    // height: 300px;
  }
}

.right {
  width: calc(100% - 180px);
  .conSelect {
    width: 100%;
  }
}
</style>